<template>
  <view>
    <z-paging
      ref="paging"
      style="background-color: #eeeeef"
      v-model="itemList"
      @query="queryList"
      :fixed="true"
      :auto="false"
      :auto-show-back-to-top="true"
      :empty-view-img="`${getImageUrl('empty.png')} `"
      empty-view-text="暂无数据~"
      :empty-view-img-style="imgStyle"
    >
      <!-- 顶部 搜索 banner -->
      <view>
        <u-navbar :is-back="true" :background="background" :border-bottom="false" title="公益活动">
        </u-navbar>

        <view class="content">
          <view class="active-box">
            <view
              class="active-item dis-flex"
              @click="routeTo(item)"
              v-for="(item, index) in itemList"
              :key="index"
            >
              <u-image
                class="active-img"
                :src="`${getImageUrl('banner.png')} `"
                width="180rpx"
                height="180rpx"
              ></u-image>
              <view class="item-detai">
                <view class="title oneline-hide-1">{{ item.title }}</view>
                <view class="des twoline-hide">{{ item.des }}</view>
                <view class="date">{{ item.date }}</view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </z-paging>
  </view>
</template>

<script>
let systemInfo = uni.getSystemInfoSync()
export default {
  data() {
    return {
      itemList: [
        {
          id: 1,
          picUrl: '',
          title: '乡村儿童守护公益计划乡村儿童守护公益',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远，关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        },
        {
          picUrl: '',
          title: '乡村儿童守护公益计划',
          des: '关爱乡村儿童教育额，共筑美好未来，让爱不再遥远...',
          date: '2024-03-06'
        }
      ],
      background: {
        background: '#fff'
      },
      imgStyle: {
        width: '12rem'
      },
      statusBarHeight: systemInfo.statusBarHeight
    }
  },
  computed: {
    // 转换字符数值为真正的数值
    navbarHeight() {
      // #ifdef APP-PLUS || H5
      return this.height ? this.height : 50
      // #endif
      // #ifdef MP
      // 小程序特别处理，让导航栏高度 = 胶囊高度 + 两倍胶囊顶部与状态栏底部的距离之差(相当于同时获得了导航栏底部与胶囊底部的距离)
      // 此方法有缺陷，暂不用(会导致少了几个px)，采用直接固定值的方式
      // return menuButtonInfo.height + (menuButtonInfo.top - this.statusBarHeight) * 2;//导航高度
      let height = systemInfo.platform == 'ios' ? 44 : 48
      return this.height ? this.height : height
      // #endif
    }
  },
  methods: {
    queryList() {},
    routeTo(item) {
      uni.navigateTo({
        url: '/jijin/active-detail?activeId=' + item.id
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.contentBg {
  width: 100%;
  position: absolute;
  top: 0px;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top;
  height: 400rpx;
}

.content {
  position: relative;
  padding: 20rpx;
  .active-box {
    .active-top {
      padding: 10rpx 0 30rpx 0;
      .top-l {
        font-weight: 500;
        font-size: 30rpx;
        color: #333333;
      }
      .top-r {
        font-size: 24rpx;
        color: #999999;
        .img {
          margin-left: 10rpx;
        }
      }
    }
    .active-item:last-child {
      margin-bottom: 0;
    }
    .active-item {
      height: 220rpx;
      background: #ffffff;
      border-radius: 10rpx;
      width: 100%;
      padding: 20rpx;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      .active-img {
        border-radius: 10rpx;
      }
      .item-detai {
        flex: 1;
        padding-left: 20rpx;
        .title {
          font-weight: 500;
          font-size: 30rpx;
          color: #333333;
          margin-bottom: 20rpx;
        }
        .des {
          font-size: 26rpx;
          color: #666666;
          margin-bottom: 20rpx;
        }
        .date {
          font-size: 24rpx;
          color: #999999;
        }
      }
    }
  }
}
</style>
